<template>
	<div>
		<div class="invitation">
			<p class="invip">已邀请 <span>5</span>人</p>
			<p class="invipt">请再接再厉，邀请更多，获利更多</p>
			<div class="invipcenter">
				<p class="invipnet"><span style="color: #999;">获取成长值</span><br /> <span style="color: #585867;font-weight: 600;">53</span></p>
				<p><span style="color: #999;">获取荣誉值</span><br /> <span style="color: #585867;font-weight: 600;">53</span></p>
				
		</div>
		</div>
		
		<div style="padding: 0px 20px;" >
			<p class="invicente">邀请列表</p>
			<ul>
				<li class="invili">
					<p><img src="../assets/numbers.png"/></p>
					<p class="invispan"><span style=" ;">用户名1</span><br /><span>已注册,未实名</span></p>
					<p>他邀请:6人</p>
				</li>
				<li class="invili">
					<p><img src="../assets/numbers.png"/></p>
					<p class="invispan"><span style=" ;">用户名1</span><br /><span>已注册,未实名</span></p>
					<p>他邀请:6人</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
</script>

<style type="text/css">
	body{
		margin: 0px;
	}
</style>
<style  lang="scss" scoped="">
.invispan span:nth-of-type(1){
	font-weight: 500;
	font-size:32px;
	padding: 0px 0px 10px 0px;
	color: #585867;
}
.invispan span:nth-of-type(2){
	
	padding: 10px 0px;
	color: #585867;
	font-size:26px ;
}
.invili{
	height: 150px;
	clear: both;
	border-bottom:1px solid #F2F1F7 ;
}
.invili img{
	width: 40px;
	height: 40px;
}
.invili p:nth-of-type(1){
	width: 60px;
	float: left;
	padding-top: 5px;
}
.invili p:nth-of-type(2){
	float: left;
}
.invili p:nth-of-type(3){
	float: right;
	color: #585867;
	font-size: 24px;
}
.invicente{
	margin-top: 120px;
	
	color: #585867;
	font-size: 28px;
}
 .invitation{
 	height: 300px;
 	width: 100%;
 	background: #62D1B1;
 	text-align: center;
 	font-size: 30px;
 	color: #fff;	
 	position: relative;	
 }
 .invip{
 	margin: 0px;
 	padding-top: 40px;
 	span{
 		color: #F9DE82;
 		font-size: 64px;
 		
 	}	
 }
 .invipt{
 	opacity: .6;
 }
 .invipcenter{
 	width: 664px;
 	height: 130px;
 	border-radius:20px ;
 	position: absolute;
 	left: 50%;
 	margin-left: -332px;
 	box-shadow:0px 2px 20px #999;
 	bottom: -76px;
 	display: flex;
 	justify-content: space-around;
 	background: #fff;
 	p{
 		
 		
 		font-size: 28px;
 		width: 50%;
 	}
 }
 .invipnet{
 	border-right:1px solid #F2F1F7 ;
 }
</style>